<template>
	<div class="loginPage">
		<div class="topTitle flex" style="justify-content: initial;">
				<a href="javascript:;" class="return" @click="back"></a>
				<span class="login-tips" style="margin-left: 7.5rem;">用户登录</span>
		</div>
		<div class="cont">
			<ul class="loginForm-ul">
				<li><div class="formfile fix"><i class="icon1"></i> <input type="text" placeholder="用户名" id="username" v-model="loginForm.username"></div></li>
				<li class="showPswli"><div class="formfile fix"><i class="icon2"></i> <input :type="pwdType" placeholder="密码" id="password" v-model="loginForm.password" @keyup.enter="login"><span class="eyes" @click="showPwd" :class="{'no-eyes':this.pwdType === 'text'}"></span></div></li>
				<li style="border:0 none;">
					<p class="error_msg" v-show="errorMsg">{{errorMsg}}</p>
					<div id="captcha"></div>
				</li>
			</ul>
			<div class="btn"><a href="javascript:;" @click="login">登录</a></div>
			<div class="no-login-wrap flex" style="justify-content:space-between;">
				<div>没有注册?<router-link to="/register" style="margin-left: 5px;">去注册</router-link></div>
				<div><router-link to="/forgetPassword">忘记密码?</router-link></div>
			</div>
			<div class="otherloginBox">
				<div class="otherlogin">
					<span></span>
					<i>其他登录方式</i>
				</div>
				<div class="otherloginDiv">
					<a href="javascript:;" class="login_qq"></a>
					<a href="javascript:;" class="login_weixin"></a>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {login,logout} from '@/api/login'
	import {getPath} from '@/utils/auth'
	export default{
		name:'login',
		metaInfo: {
      title: '1234tv登录',
			meta: [{
        name: 'keywords',
        content: '1234tv.com、1234tv财经直播、财经直播平台、财经视频、财经直播系统、财经直播间、财经直播视频、财经直播教程'
      },{
				name: 'description',
				content: '专注互联网财经视频直播服务，致力为金融行业从业者、投资者、财经院校师生提供专业、综合性互联网财经直播服务平台。'
			}],
    },
		data(){
			return{
				pwdType:'password',
				errorMsg:'',
				loginForm:{
					username:'',
					password:'',
					NECaptchaValidate:''
				}
			}
		},
		creatd(){
			this.captchaIns = null
		},
		methods:{
			showPwd(){
				if(this.pwdType === 'password'){
					this.pwdType = 'text'
				}else{
					this.pwdType = 'password'
				}
			},
			back(){
				this.$router.go(-1)
			},
			login(){
				if(this.loginForm.username === '' || this.loginForm.password === ''){
					this.errorMsg = '用户名，密码必须都填写!'
					return false
				}
				if(this.captchaIns && this.loginForm.NECaptchaValidate === ''){
					this.errorMsg = '请先验证!'
					return false
				}
				if(this.errorMsg === ''){
					this.$store.dispatch('Login',this.loginForm).then(res=>{
						let fromPath = getPath()
						if(fromPath){
							this.$router.push(fromPath)
						}else{
							this.$router.push('/')
						}
					}).catch(err=>{
						if(err.data.login_faild && err.data.login_faild >= 3 || err.code === 1000002){
							if(this.captchaIns){
								this.captchaIns.refresh()
							}else{
								this.initCaptcha()
							}
						}
					})
				}
			},
			initCaptcha(){
				let that = this;
				initNECaptcha({
						element: '#captcha',
						captchaId: 'b280b14b93ba4e2c9cf3d25a922cd0ab',
						mode: 'float',
						onVerify: (err,res)=>{
							if(!err){
								this.loginForm.NECaptchaValidate = res.validate
								if(this.errorMsg === '请先验证!'){
									this.errorMsg = ''
								}
							}
						}
				}, function (instance) {
						// 初始化成功后得到验证实例instance，可以调用实例的方法
						that.captchaIns = instance
				}, function (err) {
						// 初始化失败后触发该函数，err对象描述当前错误信息
				})
			}
		},
		watch:{
			'loginForm.username':function(val){
				if(val.length === 0){
					this.errorMsg = '用户名必须都填写'
				}else{
					this.errorMsg = ''
				}
			},
			'loginForm.password':function(val){
				if(val.length === 0){
					this.errorMsg = '密码必须都填写'
				}else{
					this.errorMsg = ''
				}
			}
		},
		mounted(){
		}
	}
</script>
<style>
.yidun_intellisense--light .yidun_intelli-control{border-top:0 none !important;}	
</style>

